<%@page isELIgnored="false" pageEncoding="UTF-8" contentType="text/html; UTF-8" %>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css">
    <script src="${pageContext.request.contextPath}/js/jquery-1.12.4.js"></script>
    <style type="text/css">
        .layui-table-cell {
            height: auto;
            line-height: 28px;
        }
    </style>

    <script src="${pageContext.request.contextPath}/layui/layui.all.js"></script>
    <script>
        // 公共变量 有没有选择图片
        var file_upload_status = false;
        $(function () {
            layui.use(['table','laytpl'], function(){
                var table = layui.table;
                var laytpl = layui.laytpl;
                table.render({
                    elem: '#deptTable',
                    // 定义 table 的大标题（在文件导出等地方会用到） 不显示
                    title: "上师表",
                    // 使用工具栏
                    toolbar:"#myToolbar",
                    height: 600,
                    //数据接口
                    url: '${pageContext.request.contextPath}/guru/showAll',
                    // 开启分页
                    page: true,
                    // 设置分页的属性
                    limit:10,
                    limits:[10,20,30],
                    // 是否显示加载条
                    loading: true,
                    //表头
                    cols: [[
                        // 设置复选框
                        {type: "checkbox"},
                        {field: 'guruId', title: '编号'},
                        {field: 'guruImage',templet:"#guruImageTemplet", title: '图片'},
                        {field: 'guruName', title: '上师名字'},
                        {field: 'guruStatus',templet:"#guruStatusTemplet", title: '状态'},
                        {field: 'guruNickName', title: '上师法号'},
                        { title: '操作',fixed: 'right',templet:"#caoZuo"}
                    ]]
                });
            })


            layui.use(['upload','table','layer','form'], function(){
                /*var element = layui.element;*/
                var table = layui.table;
                var layer = layui.layer;
                form=layui.form;
                form.render();
                var $ = layui.jquery,upload = layui.upload;

                //普通图片上传
                var uploadInst = upload.render({
                    elem: '#test1'
                    //文件上传有自己独立的url
                    ,url: '${pageContext.request.contextPath}/guru/insert',
                    //开启多文件上传有一个文件队列
                    multiple:true,
                    number:1,
                    data:{
                        //参数携带各式 key：匿名函数
                        guruName:function(){
                            return $('#guruName').val();
                        },
                        guruNickName:function(){
                            return $('#guruNickName').val();
                        },
                        guruStatus:function () {
                            return $('#guruStatus1').val();
                        }
                    },
                    // 不让文件上传组件自动上传
                    auto:false,
                    // 绑定提交按钮 让按钮决定什么时候提交
                    bindAction: '#addSubmitBtn',
                    choose: function(obj){
                        //预读本地文件示例，不支持ie8
                        obj.preview(function(index, file, result){
                            // 如果选择修改为ture
                            file_upload_status = true;
                            $('#imgdemo1').attr('src', result); //图片链接（base64）
                        })},done: function(res,index,upload){
                        //清空表单清空图片，修改file_upload_status为false
                        console.info(index);
    //如果上传失败
                        if(res.code > 0){
                            return layer.msg('上传失败');
                        }else{
                            //上传成功刷新表单
                            //3.刷新table
                            layer.closeAll('page')
                            table.reload("deptTable");
                            file_upload_status=false;
                            $('#imgdemo1').attr('src', "");
                            //index被上传的文件的队列的下标，通过delete方法可以删除队里的文件
                            delete this.files[index];
                            $('#guruName').val('');
                            $('#guruNickName').val('');
                        }
                    }
                });

                //更新功能图片上传
                var uploadInst2 = upload.render({
                    elem: '#test2'
                    //文件上传有自己独立的url
                    ,url: '${pageContext.request.contextPath}/guru/update',
                    //开启多文件上传有一个文件队列
                    multiple:true,
                    number:1,
                    data:{
                        //参数携带各式 key：匿名函数
                        guruId:function(){
                          return $('#updateId').val();
                        },
                        guruName:function(){
                            return $('#updateName').val();
                        },
                        guruNickName:function(){
                            return $('#updateNickName').val();
                        },
                        guruStatus:function () {
                            return $("#guruStatus2").val();
                        }

                    },
                    // 不让文件上传组件自动上传
                    auto:false,
                    // 绑定提交按钮 让按钮决定什么时候提交
                    bindAction: '#updateSubmitBtn',
                    choose: function(obj){
                        //将每次选择的文件追加到文件队列，把选择的文件放入集合中
                        var files=this.files=obj.pushFile();
                        //预读本地文件示例，不支持ie8
                        obj.preview(function(index, file, result){
                            // 如果选择修改为ture
                            file_upload_status = true;
                            $('#imgdemo2').attr('src', result); //图片链接（base64）//给img标签的src赋值
                        })},done: function(res,index,upload){
                        //清空表单清空图片，修改file_upload_status为false
                        console.info(index);
                        //清空表单清空图片，修改file_upload_status为false
                        console.info(index);
                        if(res.code > 0){
                            return layer.msg('上传失败');
                        }else{
                            //上传成功刷新表单
                            //3.刷新table
                            layer.closeAll('page');
                            table.reload("deptTable");
                            file_upload_status=false;
                            $('#imgdemo2').attr('src', "");
                            //index被上传的文件的队列的下标，通过delete方法可以删除队里的文件
                            delete this.files[index];
                            $('#updateName').val('');
                            $('#updateNickName').val('');
                        }
                    }
                });
            });
        });

        function add() {
            layui.use('table',function () {
                var table=layui.table;
                console.info("进入点击事件")
                // 1.判断有没有选择图片
                if(!file_upload_status){
                    // 2.没有的话 通过ajax提交
                    console.info("没有选择图片 可以执行ajax")
                    $.ajax({
                        url:"${pageContext.request.contextPath}/guru/insert",
                        data:{
                            guruName:$("#guruName").val(),
                            guruNickName:$("#guruNickName").val(),
                            guruStatus:$('#guruStatus1').val('')
                        },
                        success:function (data) {
                            //2.提示修改成功
                            if(data.isInsert){
                                layer.closeAll('page');
                                table.reload("deptTable");
                                layer.alert("添加成功",{time:3000});
                                $('#guruName').val('');
                                $('#guruNickName').val('');
                            }else{
                                layer.alert("添加失败",{time:3000});
                            }
                        }
                    })
                }
            })
        }

        function update() {
            layui.use('table',function () {
                var table=layui.table;
                console.info("进入点击事件")
                // 1.判断有没有选择图片
                if(!file_upload_status){
                    // 2.没有的话 通过ajax提交
                    console.info("没有选择图片 可以执行ajax")
                    $.ajax({
                        url:"${pageContext.request.contextPath}/guru/update",
                        data:{
                            guruId:$("#updateId").val(),
                            guruName:$("#updateName").val(),
                            guruNickName:$("#updateNickName").val(),
                            guruStatus:$('#guruStatus2').val('')
                        },
                        success:function (data) {
                            //2.提示修改成功
                            if(data.isUpdate){
                                layer.closeAll('page');
                                table.reload("deptTable");
                                layer.alert("修改成功",{time:3000});
                                $('#updateName').val('');
                                $('#updateNickName').val('');
                            }else{
                                layer.alert("修改失败",{time:3000});
                            }
                        }
                    })
                }
            })
        }



        function toOpenAddLayer() {
            $("#guruId").val(0);
            $("#guruId_div").css("display","none");
            $("#addSubmitBtn").show();
            layui.use('layer', function(){
                layer.open({
                    title:"添加上师",
                    content:$("#addForm"),
                    type:1
                })
            });
        }


        function toOpenUpdateLayer(guruId) {
            $.ajax({
                url:"${pageContext.request.contextPath}/guru/selectOne",
                data:"guruId="+guruId,
                success:function(data){
                    $("#updateId").val(data.guruId);
                    $("#updateName").val(data.guruName);
                    $("#updateNickName").val(data.guruNickName);
                    $("#imgdemo2").attr('src', "${pageContext.request.contextPath}/" + data.guruImage);

                }
            });
            $("#updateSubmitBtn").show();
            //2.
            layui.use('layer', function(){
                layer.open({
                    title:"修改轮播图",
                    content:$("#updateForm"),
                    type:1
                })
            });
        }


        function doDelete(guruId) {
            //确认；如果点击确认删除；否则不删除
            layui.use(['layer','table'], function(){
                var table = layui.table;
                layer.confirm('确定真的要把我干掉吗？', {icon: 3, title:'确认删除'}, function(index){
                    //do something
                    console.log(guruId)
                    $.ajax({
                        url:"${pageContext.request.contextPath}/guru/delete",
                        data:"guruId="+guruId,
                        success:function(data){
                            layer.alert(data.isDelete,{time:2000});
                            table.reload("deptTable");
                            layer.close(index);
                        }
                    })
                });
            });
        }

    </script>
    <script>
        $(function () {
            layui.use(['element', 'upload', 'table', 'layer'], function () {
                var table = layui.table;
                var upload = layui.upload;
                var layer = layui.layer;
                var uploadExcel = upload.render({
                    elem: '#upload'
                    , url: '${pageContext.request.contextPath}/guru/upload'
                    , accept: 'file' //普通文件
                    , done: function (res) {
                        if (res.code > 0) {
                            //如果上传失败
                            return layer.msg('上传失败');
                        } else {
                            //上传成功 刷新table
                            layer.closeAll('page');
                            table.reload("deptTable");
                            //2.提示添加成功
                            if (res) {
                                layer.alert("上传成功", {time: 3000});
                            } else {
                                layer.alert("上传失败", {time: 3000});
                            }
                        }
                    }
                });
            });
        })
    </script>

    <script>
        layui.use('form',function(){
            form=layui.form;
            form.render();
            form.on('switch(guruState1)', function(data){
                if(data.elem.checked){
                    $("#guruStatus1").val("0");
                }else{
                    $("#guruStatus1").val("1");
                }
            });
            form.on('switch(guruState2)', function(data){
                if(data.elem.checked){
                    $("#guruStatus2").val("0");
                }else{
                    $("#guruStatus2").val("1");
                }
            });
        })
    </script>

    <script id="guruImageTemplet" type="text/html">
        <img src="${pageContext.request.contextPath}{{= d.guruImage }}" alt="{{= d.guruName }}">
    </script>

    <script id="guruStatusTemplet" type="text/html">
        {{#  if(d.guruStatus == 0){ }}
        <span>显示</span>
        {{#  } else { }}
        <span>不显示</span>
        {{#  } }}
    </script>
    <%--    操作按钮 模板--%>
    <script id="caoZuo" type="text/html">
        <button type="button" class="layui-btn layui-btn-radius layui-btn-normal" onclick="toOpenUpdateLayer('{{d.guruId}}')">修改</button>
        <button type="button" class="layui-btn layui-btn-danger" onclick="doDelete('{{d.guruId}}')">删除</button>
    </script>

</head>
<body>

    <%--表格展示--%>
    <table id="deptTable" class="layui-table"></table>
    <%--顶部工具栏--%>
    <%--display: none 只在工具栏展示 不在页面显示--%>
    <div id="myToolbar" style="display: none">
         <%--//按钮标签，格式为layui--%>
            <button type="button" class="layui-btn" onclick="toOpenAddLayer()">
            <i class="layui-icon layui-icon-add-circle"></i>
            添加
            </button>
            <button type="button" class="layui-btn" id="upload">
                    <i class="layui-icon layui-icon-add-circle"></i>
                    批量添加
            </button>
            <a href="${pageContext.request.contextPath}/guru/download">
                    <button type="button" class="layui-btn">
                        <i class="layui-icon layui-icon-delete"></i>
                        批量下载
                    </button>
            </a>
      <%--  <button type="button" class="layui-btn" onclick="doMultiDelete()">
            <i class="layui-icon layui-icon-delete"></i>
            批量删除
        </button>--%>
    </div>

        <form id="addForm" style="display: none;padding: 15px" class="layui-form" enctype="multipart/form-data">
            <div class="layui-form-item" id="guruId_div">
                <label class="layui-form-label">编号</label>
                <div class="layui-input-block">
                    <input name="guruId" id="guruId" class="layui-input" readonly/>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">上师名字</label>
                <div class="layui-input-block">
                    <input name="guruName" id="guruName" class="layui-input" placeholder="请输入上师名字" />
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">选择要上传图片</label>
                <div class="layui-upload">
                    <button type="button" class="layui-btn" id="test1">上传图片</button>
                    <div class="layui-upload-list">
                        <img class="layui-upload-img" style="width: 100px;height: 100px" id="imgdemo1">
                        <p id="demoText"></p>
                    </div>
                </div>
            </div>

            <div class="layui-form-item" id="status">
                <label class="layui-form-label">选择上师的状态</label>
                <div class="layui-input-block">
                    <input type="checkbox" name="guruStatus" id="guruStatus1"  value="0" lay-filter="guruState1" lay-skin="switch" lay-text="显示|不显示" checked>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">上师昵称</label>
                <div class="layui-input-block">
                    <input name="guruNickName" id="guruNickName" class="layui-input" placeholder="" />
                </div>
            </div>
            <div class="layui-form-item">
                <button lay-submit type="button" lay-filter="add" class="layui-btn" onclick="add()" id="addSubmitBtn">添加</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </form>

        <%--//更新表单--%>
    <form id="updateForm" style="display: none;padding: 15px" class="layui-form" enctype="multipart/form-data">
        <div class="layui-form-item" id="updateId_div">
            <label class="layui-form-label">编号</label>
            <div class="layui-input-block">
                <input name="guruId" id="updateId" class="layui-input" readonly/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">上师名字</label>
            <div class="layui-input-block">
                <input name="guruName" id="updateName" class="layui-input" placeholder="请输入上师名字" />
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">选择要上传图片</label>
            <div class="layui-upload">
                <button type="button" class="layui-btn" id="test2">上传图片</button>
                <div class="layui-upload-list">
                    <img class="layui-upload-img" style="width: 100px;height: 100px" id="imgdemo2">
                    <p id="updateText"></p>
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">选择上师的状态</label>
            <div class="layui-input-block">
                <input type="checkbox" name="guruStatus" id="guruStatus2" value="0" lay-filter="guruState2" lay-skin="switch" lay-text="显示|不显示" checked>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">上师昵称</label>
            <div class="layui-input-block">
                <input name="guruNickName" id="updateNickName" class="layui-input" placeholder="" />
            </div>
        </div>
        <div class="layui-form-item">
            <button lay-submit type="button" lay-filter="update" class="layui-btn" onclick="update()" id="updateSubmitBtn">修改</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </form>


</body>
</html>



</body>
</html>
